<template>
  <div class="">
    <a-form ref="formRef" :model="formModel">
      <a-row>
        <a-col :span="24">
          <a-form-item field="parent_id" label="分类" label-col-flex="100px">
            <a-cascader
              v-model="formModel.cate_id"
              :options="categoryDatas"
              :field-names="{ value: 'id', label: 'name' }"
              placeholder="分类"
              check-strictly
              allow-search
              allow-clear
              style="width: 60%;"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            field="name"
            label="标题"
            required
            :validate-trigger="['change', 'input']"
            :rules="[
              {
                required: true,
                message: '标题不能为空',
              },
            ]"
            label-col-flex="100px"
          >
            <a-input v-model="formModel.name" placeholder="请输入标题"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="cover_img" label="封面图" label-col-flex="100px">
            <images-upload :single-file="singleFile" :show-file-list="false" accept="image/jpeg, image/png, image/gif" @uploadCallback="singleCallback"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="images" label="多图" label-col-flex="100px">
            <images-upload :file-list="formModel.images" :show-file-list="true" accept="image/jpeg, image/png, image/gif" :limit="6" @uploadCallback="imagesCallback"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="source" label="来源" label-col-flex="100px">
            <a-input v-model="formModel.source" placeholder="请输入来源"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="keywords" label="关键字" label-col-flex="100px">
            <a-input v-model="formModel.keywords" placeholder="请输入关键字"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="description" label="网页描述" label-col-flex="100px">
            <a-textarea v-model="formModel.description" placeholder="请输入网页描述" :auto-size="{minRows:2, maxRows:5}" :max-length="{ length: 20, errorOnly: true }" show-word-limit allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="content" label="内容" label-col-flex="100px">
<!--            <TinymceEditor :modelValue="formModel.content" @getContent="getContent"/>-->
            <TinymceEditor v-model="formModel.content"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="post_time" label="发布时间" label-col-flex="100px">
            <a-date-picker v-model="formModel.post_time" show-time format="YYYY-MM-DD HH:mm:ss"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="is_show" label="是否显示" label-col-flex="100px">
            <a-radio-group v-model="formModel.is_show">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="2">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="is_top" label="是否置顶" label-col-flex="100px">
            <a-radio-group v-model="formModel.is_top">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="2">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="is_recommend" label="是否推荐" label-col-flex="100px">
            <a-radio-group v-model="formModel.is_recommend">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="2">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="is_comment" label="是否允许评论" label-col-flex="100px">
            <a-radio-group v-model="formModel.is_comment">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="2">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="status" label="状态" label-col-flex="100px">
            <a-select v-model="formModel.status" placeholder="" allow-clear style="width: 160px;">
              <a-option v-for="(item, index) in statusList" :key="index" :value="Number(index)" :label="item" />
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="sort" label="排序" label-col-flex="100px">
            <a-input-number v-model="formModel.sorting" :style="{width:'160px'}"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';

  import { apiInfo, apiSave } from '@/api/article';
  // import SingleUpload from '@/components/file-upload/index.vue';
  import ImagesUpload from '@/components/file-upload/index.vue';
  import TinymceEditor from '@/components/tinymce/index.vue';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    id: {
      type: [Number, String],
      default: '',
    },
    categoryDatas: {
      type: Array,
      default() {
        return [];
      },
    },
  });
  const emit = defineEmits(['saveCallback']);

  const baseFormModel = () => {
    return {
      id: '',
      created_at: '',
      updated_at: '',
      cate_id: '',
      name: '',
      cover_img: '',
      images: [],
      source: '',
      keywords: '',
      description: '',
      content: '',
      post_time: '',
      hits: 0,
      likes: 0,
      is_show: 1,
      is_top: 2,
      is_recommend: 2,
      is_comment: 1,
      sorting: 10,
      status: 1,
    };
  };
  const formRef = ref<FormInstance>();
  const formModel = ref<any>(baseFormModel());

  const statusList: any = {
    1: '显示',
    2: '隐藏',
    90: '删除',
  };

  const categoryDatas = ref<any>([]); // 分类
  const singleFile = ref<any>({});

  // 表单重置
  const reset = async () => {
    formModel.value = baseFormModel();
    await formRef.value?.resetFields();
    singleFile.value = {};
  };
  const fetchData = async (row?: any, params?: any) => {
    categoryDatas.value = props.categoryDatas;
    if (params.categoryDatas) {
      categoryDatas.value = params.categoryDatas;
    }

    reset();
    if (row) {
      const { data } = await apiInfo({ id: row.id });
      formModel.value = data;
      formModel.value.date_range = [formModel.value.startdate, formModel.value.enddate];
      singleFile.value = {
        url: formModel.value.full_cover_img,
        path: formModel.value.full_cover_img,
      };
    }
  };
  // 提交
  const submit = async (done: any) => {
    try {
      const ruleRes = await formRef.value?.validate();
      if (!ruleRes) {
        [formModel.value.startdate, formModel.value.enddate] = formModel.value.date_range;
        await apiSave(formModel.value);
        // Message.success({
        //   duration: 2000,
        //   content: formModel.value.id ? '更新成功' : '添加成功',
        //   onClose: () => {
        //     router.push({
        //       name: 'Article',
        //     });
        //   },
        // });
        done();
        emit('saveCallback');
      } else {
        done(false);
      }
    } catch (err) {
      done(false);
    } finally {
      done(false);
    }
  };
  const getContent = (value: string) => {
    formModel.value.info = value;
  };
  // 文件上传回调
  const singleCallback = (file: any) => {
    singleFile.value = {
      url: file.url,
      path: file.url,
    };
    formModel.value.cover_img = file.filepath;
  };
  const imagesCallback = (fileList: any) => {
    formModel.value.images = fileList;
  };

  // 暴露方法【给父级调用】
  defineExpose({
    fetchData,
    submit,
  });
</script>

<style scoped lang="less">

</style>
